<template>
  <div class="publish-container">
    <el-card class="publish-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="!hasId">发布文章</el-breadcrumb-item>
          <el-breadcrumb-item v-else>修改文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="publishForm" :rules="publishFormRules" ref="publishFormRef" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="publishForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-tiptap v-model="publishForm.content" :extensions="extensions" lang="zh"></el-tiptap>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="publishForm.cover.type">
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <template v-if="publishForm.cover.type>0">
            <Cover v-for="(item,index) in publishForm.cover.type" :key="item" v-model="publishForm.cover.images[index]">
            </Cover>
          </template>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="publishForm.channel_id" placeholder="请选择频道" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in channelsInfo" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="publish('publishFormRef')">发表</el-button>
          <el-button @click="draft('publishFormRef')">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import Cover from '@/components/cover.vue'
  import {
    getAllChannelsInfo,
    publishArticleInfo,
    getArticleInfo,
    updateArticleInfo
  } from '@/api/article.js'
  import 'element-tiptap/lib/index.css'
  import {
    ElementTiptap,
    // 需要的 extensions
    Doc,
    Text,
    Paragraph,
    Heading,
    Bold,
    Underline,
    Italic,
    Strike,
    ListItem,
    BulletList,
    OrderedList,
    Link,
    Image,
    CodeBlock,
    Blockquote,
    TodoItem,
    TodoList,
    TextAlign,
    FontSize,
    FontType,
    Fullscreen,
    TextHighlight,
    TextColor,
    FormatClear,
    Table,
    TableHeader,
    TableCell,
    TableRow,
    History,
    TrailingNode,
    HardBreak,
    HorizontalRule,
    LineHeight,
    Indent
  } from 'element-tiptap'
  export default {
    name: 'Publish',
    components: {
      'el-tiptap': ElementTiptap,
      Cover
    },
    data() {
      return {
        title: '发布文章',
        extensions: [
          new Doc(), // 必须项
          new Text(), // 必须项
          new Paragraph(), // 必须项
          new Heading({
            level: 6
          }), // 标题
          new Bold({
            bubble: true
          }), // 加粗 bubble: true 在气泡菜单中渲染菜单按钮
          new Underline({
            bubble: true,
            menubar: false
          }), // 下划线 bubble: true, menubar: false 在气泡菜单而不在菜单栏中渲染菜单按钮
          new Italic({
            bubble: true
          }), // 斜体
          new Strike({
            bubble: true
          }), // 删除线
          new ListItem(), // 使用列表必须项
          new BulletList({
            bubble: true
          }), // 无序列表
          new OrderedList({
            bubble: true
          }), // 有序列表
          new Link(), // 链接
          new Image(), // 图片
          new CodeBlock({
            bubble: true
          }), // 代码块
          new Blockquote(), // 引用
          new TodoItem(), // 任务列表必须项
          new TodoList(), // 任务列表
          new TextAlign({
            bubble: true
          }), // 文本对齐方式
          new FontSize({
            bubble: true
          }), // 字号
          new FontType({
            bubble: true
          }), // 字体
          new Fullscreen(), // 全屏
          new TextHighlight({
            bubble: true
          }), // 文本高亮
          new TextColor({
            bubble: true
          }), // 文本颜色
          new FormatClear({
            bubble: true
          }), // 清除格式
          new Table({
            resizable: true
          }), // 表格
          new TableHeader(), // 表格必须项
          new TableCell(), // 表格必须项
          new TableRow(), // 表格必须项
          new History(), // 撤销
          new TrailingNode(), // 重做
          new HardBreak(), // 分割线
          new HorizontalRule(), // 行距
          new LineHeight(), // 增加缩进
          new Indent() // 减少缩进
        ],
        hasId: false,
        //频道信息
        channelsInfo: [],
        //提交的文章表单
        publishForm: {

          content: '',
          cover: {
            type: 0,
            images: []
          },
          channel_id: ''
        },
        publishFormRules: {
          title: [{
              required: true,
              message: '请输入标题',
              trigger: 'blur'
            },
            {
              min: 5,
              max: 30,
              message: '长度在 5 到 30 个字符',
              trigger: 'blur'
            }
          ],
          channel_id: [{
            required: true,
            message: '请选择频道',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getAllChannelsInfo()
      if (this.$route.query.id) {
        this.hasId = true
        this.getArticleInfo(this.$route.query.id)
      }
    },
    methods: {
      getArticleInfo(id) {
        getArticleInfo(id).then(res => {
          this.publishForm = res.data.data
        })
      },
      getAllChannelsInfo() {
        getAllChannelsInfo().then(res => {
          this.channelsInfo = res.data.data.channels
        })
      },
      publish(formName) {
        this.$refs[formName].validate(valid => {
          if (!valid) {
            return
          } else {
            if (this.hasId) {
              updateArticleInfo(this.$route.query.id, false, this.publishForm).then(res => {
                this.$router.push('/articles')
                this.$message({
                  type: 'success',
                  message: '修改后发表成功'
                })
              })
            } else {
              publishArticleInfo(this.publishForm, false).then(res => {
                this.$router.push('/articles')
                this.$message({
                  type: 'success',
                  message: '发表成功'
                })
              })
            }

          }
        })
      },
      draft(formName) {
        this.$refs[formName].validate(valid => {
          if (!valid) {
            return
          } else {
            if (this.hasId) {
              updateArticleInfo(this.$route.query.id, true, this.publishForm).then(res => {
                this.$router.push('/articles')
                this.$message({
                  type: 'success',
                  message: '修改后存入草稿成功'
                })
              })
            } else {
              publishArticleInfo(this.publishForm, true).then(res => {
                this.$router.push('/articles')
                this.$message({
                  type: 'success',
                  message: '存入草稿成功'
                })
              })
            }

          }
        })
      },
      getCover(index, url) {
        this.publishForm.cover.images[index] = url
      }
    }
  }

</script>
<style lang="less" scoped>
  .publish-card {
    margin: 15px;
  }

  textarea {
    height: 100px;
    width: 100%;
  }

</style>
